<div id="network-supply-product-bar2" style="height: 100%">

</div>

<script type="text/javascript">
    $(function () {
        loadbar2();
        $("select#delivery").change(function(){
            loadbar2();
        });
    });
    function loadbar2() {
        document.getElementById("loading").style.display="";
        var center=$("#delivery").val();
        $.ajax({
            url: "#springUrl('/network/supply/product/bar2')",
            data: {"center": center},
            type: "POST",
            success: function (text) {
                var d = JSON.parse(text);
                if (d.success && d.data) {
                    var myChart = echarts.init(document.getElementById('network-supply-product-bar2'), 'macarons');
                    option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b}: {c} ({d}%)"
                        },
                        legend: {
                            x : 'center',
                            y : 270,
                            data:d.data.data2
                        },

                        series: [
                            {
                                center: ['52%', '40%'],
                                name:'访问来源',
                                type:'pie',
                                radius: ['30%', '50%'],
                                avoidLabelOverlap: false,
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        show: true,
                                        textStyle: {
                                            fontSize: '30',
                                            fontWeight: 'bold'
                                        }
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        show: false
                                    }
                                },
                                data:d.data.x,
                                itemStyle: {
                                    normal: {
                                        //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                                        color: function(params) {
                                            // build a color map as your need.
                                            var colorList = [
                                                '#0fa99d','#d9d9d9','#4472c4','#c9eee7','#e7a14c',
                                                '#787473','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                                '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                            ];
                                            return colorList[params.dataIndex]
                                        },
                                        //以下为是否显示，显示位置和显示格式的设置了
                                    }}
                            },

                        ]
                    };
                    myChart.setOption(option);
                    document.getElementById("loading").style.display="none";
                }else{
                    document.getElementById("loading").style.display="none";
                    var div1="<div type='text' style='padding-top:30%' class=' text-center '>"+d.message+"</div>";
                    $("#network-supply-product-bar2").empty();
                    $("#network-supply-product-bar2").prepend(div1);
                }
            }
        });
    }

</script>